<!-- 编辑网关 -->
<template>
  <div>
    <a-modal :title="$t('Edit-gateway')" width='30%' v-model="modalVisible" @cancel="handleCancel" @ok="handleSubmit"
      :maskClosable="false" v-dragModal>
      <a-form :form='form'>
        <a-form-item :label="$t('Host')" v-bind="formLayout" has-feedback>
          <a-select v-decorator="['host', {
            rules: [
              // { required:true, message:$t('Enter')+$t('Storage-area') }
            ],
            initialValue: 'a1'
          }]" :placeholder="$t('Choose') + $t('Host')" allowClear>
            <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
              {{ (i + 9).toString(36) + i }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('Network-card')" v-bind="formLayout" has-feedback>
          <a-select v-decorator="['network_card', {
            rules: [
              // { required:true, message:$t('Enter')+$t('Storage-area') }
            ], initialValue: 'a1'
          }]" mode="multiple" :placeholder="$t('Choose') + $t('Network-card')" allowClear>
            <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
              {{ (i + 9).toString(36) + i }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleReset" class="submit-btn">
          {{ $t('Reset') }}
        </a-button>
        <a-button class="submit-btn" type="primary" @click="handleSubmit" :loading="submitLoading">
          {{ $t('Sure') }}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "EditGateway",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetGateway: {}
  },
  data() {
    return {
      form: this.$form.createForm(this),
      modalVisible: false,
      submitLoading: false,
      formLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 17 }
      },
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    },
  },

  methods: {
    //提交编辑
    handleSubmit() {
      this.form.validateFields((err, value) => {
        // if (!err) {

        // }
      })
    },

    //重置
    handleReset() {
      this.form.resetFields(); //重置弹窗
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'edit-gateway');
      this.form.resetFields(); //重置弹窗
    },
  },
}
</script>
<style scoped>
.submit-btn {
  width: 70px;
}
</style>